import { Component, type ReactNode } from 'react'
// import LeftView from '../left/LeftView'
import RightView from '../right/RightView'
import './HomeView.sass'
// import Events from '../eventbus/Events'
import { WithHoc1, WithHoc2 } from '../HOC/WithHoc'

export default class HomeView extends Component {
  constructor (props: Readonly<unknown>) {
    super(props)
    // Events.on('click', (e) => console.log(e))
    // Events.emit<string>('click', '234')
  }

  // #region 变量声明
  private Com = class extends Component {
    public constructor (props: Readonly<unknown>) {
      super(props)
    }
    public state: Readonly<{n: number}> = {
      n: 10
    }
    private onChange (e: React.ChangeEvent) {
      // console.log(e)
      this.setState({ n: (e.target as EventTarget & Element & { value: string }).value })
    }
    protected onNum () {
      console.log(111)
    }
    public render(): ReactNode {
      console.log(this.props)
      return (
        <>
          <div>
            <input name='number' type="number" onChange={ (e) => this.onChange(e) } value={ this.state.n } />
          </div>
        </>
      )
    }
  }
  private Com1 = WithHoc1(this.Com)
  private Com2 = WithHoc2(this.Com, { title: 90 })
  private Com3 = class extends this.Com1 {
    constructor (props: Readonly<unknown>) {
      super(props)

    }
    componentDidMount(): void {
      this.setState({
        n: 11
      })
    }
    public render(): ReactNode {
      return (
        <>
          <div>{ this.state.n }</div>
        </>
      )
    }
  }
  // #endregion

  // #region 事件处理函数

  // #endregion

  // #region 函数
  private add () {
    console.log(111)
  }
  // #endregion

  // 渲染
  public render(): ReactNode {
    // console.log(this.Com1)
    return (
      <div className='home'>
        {/* <LeftView /> */}
        {/* <RightView /> */}
        <this.Com1 />
        <this.Com2 />
        <this.Com3 />
        <RightView add={ this.add } />
      </div>
    )
  }
}
